<template>
  <view class="page">
    <!-- 列表 -->
    <scroll-view scroll-y class="list">
      <view v-for="(s,i) in stations" :key="s.id" class="card" :class="{first:i===0}" @tap="focusStation(s)">
        <view class="card-main">
          <view class="title-row">
            <image class="pin" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/dingwei.png" />
            <text class="title">{{ s.name }}</text>
          </view>
          <view class="addr">{{ s.addr }}</view>
          <view class="status-row">
            <view class="status"><view class="dot usable"></view><text>可用:{{ s.usable }}</text></view>
            <view class="status"><view class="dot returnable"></view><text>可还:{{ s.returnable }}</text></view>
          </view>
        </view>
       <view class="right">
         <view class="dist">距离{{ s.distanceText }}</view>
         <view class="nav-btn" @tap.stop="navTo(i)">
           <image class="nav-icon" src="https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/weier/daohang.png" mode="widthFix" />
           <text class="nav-text">导航</text>
         </view>
       </view>
      </view>
      <view class="pad-bottom" />
    </scroll-view>
  </view>
</template>

<script>
import common_config from '../../static/js/common.js';
var config = common_config.config;
var that;	
var userInfo;
export default {
  data() {
    return {
      stations: [
        ],
		center:{}
    };
  },
  onLoad() {
	that = this;
	that.center = uni.getStorageSync('location_center');
	console.log(that.center);
	that.center = JSON.parse(that.center);
  	that.plusReady();
  },
  methods: {
	//初始化
	plusReady(){
	  	userInfo = uni.getStorageSync('userInfo');
	  	if(userInfo){
	  		userInfo = JSON.parse(userInfo);
	  		that.if_login = true;
	  		that.member_profile = userInfo;
	  	}else{
	  		that.if_login = false;
	  	}
	  	that.load_datas();
	},
	load_datas(){
		console.log(33333);
		uni.request({
		  url: config.request_url+'/v2/open/worksheet/getFilterRows',
		  method: 'POST',
		  header: {
			'Content-Type': 'application/json'
		  },
		  data: {
			"appKey": config.appKey,
			"sign": config.sign,
			"worksheetId": "padgl",
			"pageSize":50,
			"pageIndex":1
		  },
		  success: (res) => {
			console.log('返回结果:', res.data);
			res = res.data;
			console.log(res);
			if(res.success){
				var datas = res.data.rows;
				var arr = [];
				for(var i = 0;i < datas.length;i++){
					var r = datas[i].jingweidu;
					r = r.split(',');
					arr.push({
						id: datas[i].id,
						name: datas[i].paddwmc,
						addr: datas[i].diqu,
						latitude: r[0],
						longitude: r[1],
						usable: datas[i].kysl,
						returnable: datas[i].khsl,
						distance: 100
					});
				}
				
				if(arr.length > 0){
					//console.log(JSON.stringify(arr));
					console.log(that.center);
					arr = common_config.sortStationsByDistance(arr, that.center);
					console.log(arr);
					that.stations = arr;
				}
			}else{
				 uni.showToast({ title: res.data.msg || '数据获取失败', icon: 'none' });
			}
		  },
		  fail: (err) => {
			console.error('请求失败:', err);
			uni.showToast({ title: '网络错误', icon: 'none' });
		  }
		})  
	},
    goBack() {
      if (getCurrentPages().length > 1) {
        uni.navigateBack();
      } else {
        uni.switchTab({ url: '/pages/home/home' });
      }
    },
    onMenu() {
      uni.showActionSheet({
        itemList: ['刷新', '筛选', '反馈'],
        success: (res) => { if (res.tapIndex === 0) this.refresh(); }
      });
    },
    locate() {
      uni.getLocation({
        type: 'gcj02',
        success: (res) => {
          uni.showToast({ title: `已定位(${res.latitude.toFixed(3)},${res.longitude.toFixed(3)})`, icon: 'none' });
        },
        fail: () => { uni.showToast({ title: '定位失败', icon: 'none' }); }
      });
    },
    refresh() {
      // TODO: 接你的接口刷新
      uni.showToast({ title: '已刷新', icon: 'none' });
    },
    focusStation(s) {
      // TODO: 若与地图联动，可在此派发事件或跳转
      uni.showToast({ title: s.name, icon: 'none' });
    },
    navTo(s) {
		console.log(that.stations[s].latitude);
		//return false;
      uni.openLocation({ latitude: parseFloat(that.stations[s].latitude), longitude: parseFloat(that.stations[s].longitude), name: that.stations[s].name, address: that.stations[s].addr });
    }
  }
};
</script>

<style lang="scss" scoped>
$bg:#f6f6f6;$blue:#0075B8;
.page{background:$bg;min-height:100vh;padding-bottom:env(safe-area-inset-bottom);}
.nav{position:sticky;top:0;z-index:10;background:#fff;padding:calc(var(--status-bar-height,0px)) 24rpx 16rpx;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1rpx solid rgba(0,0,0,0.04);}
.nav-left{justify-self:start;padding:10rpx;}
.nav-right{justify-self:end;display:flex;gap:20rpx;}
.nav-btn{margin-top:16rpx;background:#0075B8;color:#fff;border-radius:999rpx;padding:0 24rpx;line-height:60rpx;height:60rpx;font-size:26rpx;display:flex;align-items:center;gap:8rpx;}
.nav-icon{width:32rpx;height:32rpx;}
.nav-text{color:#fff;font-size:26rpx;}
.nav-ico{width:36rpx;}
.nav-title{justify-self:center;font-size:36rpx;font-weight:700;color:#222;}
.list{height:calc(100vh - 120rpx);padding:24rpx;box-sizing:border-box;}
.card{display:flex;align-items:stretch;justify-content:space-between;padding:24rpx;margin-bottom:24rpx;border-radius:24rpx;background:#fff;box-shadow:0 6rpx 18rpx rgba(0,0,0,0.04);}
.card.first{background:rgba($blue,.08);}
.card-main{flex:1;padding-right:20rpx;}
.title-row{display:flex;align-items:center;gap:12rpx;}
.pin{width:34rpx;height:34rpx;}
.title{font-size:30rpx;font-weight:700;color:#2b2f36;}
.addr{margin-top:6rpx;font-size:24rpx;color:#666c75;}
.status-row{display:flex;gap:36rpx;margin-top:16rpx;align-items:center;font-size:24rpx;color:#40444a;}
.status{display:flex;align-items:center;gap:10rpx;}
.dot{width:18rpx;height:18rpx;border-radius:50%;}
.usable{background:$blue;}
.returnable{background:#c0c0c0;}
.right{width:200rpx;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;}
.dist{color:#2f3238;font-size:28rpx;margin-top:6rpx;}
.nav-btn{margin-top:16rpx;background:$blue;color:#fff;border-radius:999rpx;padding:0 24rpx;line-height:60rpx;height:60rpx;font-size:26rpx;display:flex;align-items:center;gap:8rpx;}
.nav-btn::after{border:none;}
.nav-btn .a{background:rgba(255,255,255,0.25);border-radius:50%;width:36rpx;height:36rpx;display:inline-flex;align-items:center;justify-content:center;font-weight:700;}
.pad-bottom{height:60rpx;}
</style>
